import { createApp, VueElement } from 'vue'
import store from './store/index'
import 'normalize.css/normalize.css'
import ElementPlus from 'element-plus'
import zhCn from "element-plus/lib/locale/lang/zh-cn";//简体中文
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/display.css'
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css' //样式
import router from './router'
import App from './App.vue'
const baseImgUrl = `${import.meta.env.VITE_APP_BASE_API}`
const userInfo: string | null = JSON.parse(localStorage.getItem('userInfo') as any)
// 配置i18n
import i18n from '@/i18n/index'
// createApp(App).mount('#app')
//创建v-highlight全局指令

import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor';
import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// codemirror 编辑器的相关资源
import Codemirror from 'codemirror';
// mode
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/vue/vue';
// edit
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/edit/matchbrackets';
// placeholder
import 'codemirror/addon/display/placeholder';
// active-line
import 'codemirror/addon/selection/active-line';
// scrollbar
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/scroll/simplescrollbars.css';
// style
import 'codemirror/lib/codemirror.css';

VMdEditor.Codemirror = Codemirror;
VMdEditor.use(githubTheme, {
  Hljs: hljs,
});



const app = createApp(App)
app.use(VMdEditor);
app.use(router)
app.use(ElementPlus, {
  locale: zhCn,
})
app.use(i18n)
app.use(store)
app.mount('#app')
// 往原型挂载baseurl
app.config.globalProperties.$baseImgUrl = baseImgUrl;
app.config.globalProperties.$userInfo = userInfo;
app.directive('highlight', function (el: any) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block: any) => {
    hljs.highlightBlock(block)
  })
})

